/**
此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果

默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。

http://echarts.baidu.com/option.html#series-map.geoIndex

并且加了pin气泡图标以示数值大小
*/
//  ,
import { MapChart } from 'echarts/charts'
import { GeoComponent, VisualMapComponent } from 'echarts/components'

import echarts from '@/echarts'
import geoJson from '@/echarts/map/province.json'

echarts.use([MapChart, GeoComponent, VisualMapComponent]) //单独引入挂载

let myChart = null as any
export const useChart = async () => {
    myChart = echarts.init(document.getElementById('geo'))
    myChart.showLoading()

    echarts.registerMap('china', geoJson as any)
    myChart.hideLoading()
    return myChart
}

export var geoCoordMap = {
    台湾: [121.5135, 25.0308],
    黑龙江: [127.9688, 45.368],
    内蒙古: [110.3467, 41.4899],
    吉林: [125.8154, 44.2584],
    北京市: [116.4551, 40.2539],
    辽宁: [123.1238, 42.1216],
    河北: [114.4995, 38.1006],
    天津: [117.4219, 39.4189],
    山西: [112.3352, 37.9413],
    陕西: [109.1162, 34.2004],
    甘肃: [103.5901, 36.3043],
    宁夏: [106.3586, 38.1775],
    青海: [101.4038, 36.8207],
    新疆: [87.9236, 43.5883],
    西藏: [91.11, 29.97],
    四川: [103.9526, 30.7617],
    重庆: [108.384366, 30.439702],
    山东: [117.1582, 36.8701],
    河南: [113.4668, 34.6234],
    江苏: [118.8062, 31.9208],
    安徽: [117.29, 32.0581],
    湖北: [114.3896, 30.6628],
    浙江: [119.5313, 29.8773],
    福建: [119.4543, 25.9222],
    江西: [116.0046, 28.6633],
    湖南: [113.0823, 28.2568],
    贵州: [106.6992, 26.7682],
    云南: [102.9199, 25.4663],
    广东: [113.12244, 23.009505],
    广西: [108.479, 23.1152],
    海南: [110.3893, 19.8516],
    上海: [121.4648, 31.2891]
} as any

export const option = {
    title: {
        top: 20,
        text: '贫困县分布',
        subtext: '',
        x: 'center',
        textStyle: {
            fontSize: 30,
            color: '#ffffff'
        }
    },

    tooltip: {
        trigger: 'item',
        formatter: function (params: any) {
            if (typeof params.value[2] == 'undefined') {
                return params.name + ' : ' + params.value + '个贫困县'
            } else {
                return params.name + ' : ' + params.value[2] + '个贫困县'
            }
        }
    },
    visualMap: {
        show: true,
        min: 0,
        max: 1000,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true,
        seriesIndex: [1],
        inRange: {},
        textStyle: {
            color: '#fff'
        }
    },
    geo: {
        map: 'china',
        show: true,
        roam: true,
        zoom: 1.2, // 缩放比例
        label: {
            show: false,
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            areaColor: '#3a7fd5',
            borderColor: '#0a53e9', //线
            shadowColor: '#092f8f', //外发光
            shadowBlur: 20,
            emphasis: {
                areaColor: '#0a2dae' //悬浮区背景
            }
        }
    },
    series: [
        {
            symbolSize: 5,
            label: {
                formatter: '{b}',
                position: 'right',
                show: true,
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                color: '#ffffff'
            },
            name: 'light',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [] //
        },
        {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
                show: true,
                emphasis: {
                    show: true,
                    color: '#fff'
                }
            },
            roam: true,
            itemStyle: {
                areaColor: '#031525',
                borderColor: '#FFFFFF',
                emphasis: {
                    areaColor: '#2B91B7'
                }
            },
            animation: true,
            data: []
        },
        {
            name: 'Top 5',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin',
            symbolSize: [50, 50],
            label: {
                show: true,
                color: '#ffffff',
                fontSize: 13,
                formatter(value: any) {
                    return value.data.value[2]
                }
            },
            itemStyle: {
                color: '#D8BC37' //标志颜色
            },
            data: [], //,
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            zlevel: 1
        }
    ]
}
// myChart.setOption(option)
export default echarts
